<!--  -->
<template>
  <div class="flex items-center w-full">
    <button
      v-if="props.showPage"
      class="gl-normal-button-active p-2"
      @click="changePage('preview')"
    >
      <el-icon size="16"><ArrowLeft /></el-icon>
    </button>
    <div class="gl-button-groups grid grid-cols-5" :class="showPage ? 'w-full' : 'w-full'">
      <button
        class="gl-normal-button px-12 py-2"
        :class="activeTab == item && 'gl-active-button'"
        @click="changeActive(item)"
        v-for="(item, index) in TimeArray"
        :key="index"
      >
        {{ item }}
      </button>
    </div>
    <button v-if="props.showPage" class="gl-normal-button-active p-2" @click="changePage('next')">
      <el-icon size="16"><ArrowRight /></el-icon>
    </button>
  </div>
</template>

<script setup lang="ts">
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import moment from 'moment'
import { onMounted, ref, watch } from 'vue'
const TimeArray = ref<number[]>([])
const activeTab = ref()
onMounted(() => {
  activeTab.value = parseInt(props.activeIndex)
  for (let index = 0; index < props.length + 1; index++) {
    TimeArray.value[props.length - 1 - index] = moment().year() + 1 - index
  }
})

interface Props {
  showPage?: boolean
  length?: number
  activeIndex?: string
}
const props = withDefaults(defineProps<Props>(), {
  showPage: true,
  length: 6,
  activeIndex: `${moment().year()}`
})

interface Emits {
  (e: 'change', value: number): void
}
const emit = defineEmits<Emits>()

const changeActive = (itm: number) => {
  activeTab.value = itm
}

watch(activeTab, (newVal) => {
  console.log(newVal)

  emit('change', newVal)
})

const changePage = (dir: 'preview' | 'next') => {
  if (dir == 'preview') {
    // const arr = JSON.parse(JSON.stringify())
    TimeArray.value.splice(TimeArray.value.length - 1, 1)
    TimeArray.value.unshift(TimeArray.value[0] - 1)
  } else {
    TimeArray.value.splice(0, 1)
    TimeArray.value.push(TimeArray.value[TimeArray.value.length - 1] + 1)
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
</style>
